<template>
    <view>
        <view class="menu">
            <view :class="type == '1' ? 'menu01' : 'menu02'" @tap="changetype" id="1"><text>门店资料</text></view>
            <view :class="type == '2' ? 'menu01' : 'menu02'" @tap="changetype" id="2"><text>门店图片</text></view>
            <view :class="type == '3' ? 'menu01' : 'menu02'" @tap="changetype" id="3"><text>门店wifi</text></view>
            <view :class="type == '4' ? 'menu01' : 'menu02'" @tap="changetype" id="4"><text>门店标签</text></view>
        </view>

        <block v-if="type == '1'">
            <view class="kk">
                <view>
                    <view class="kk_1">
                        <view class="kk_1_text1">门店名称</view>
                        <view>{{detail.name}}</view>
                    </view>

                    <view class="kk_1">
                        <view class="kk_1_text1">联系人</view>
                        <view>{{detail.link_name}}</view>
                    </view>

                    <view class="kk_1">
                        <view class="kk_1_text1">联系人电话</view>
                        <view>{{detail.tel}}</view>
                    </view>

                    <view class="kk_1">
                        <view class="kk_1_text1">营业时间</view>
                        <view>{{detail.business_hours.start_time}}-{{detail.business_hours.end_time}} <image class="mdgl_dyh" src="/img/大于号.png"></image></view>
                    </view>

                    <view class="kk_1">
                        <view class="kk_1_text1">营业状态</view>
                        <view v-if="detail.status == 1">
							营业中
                            <image class="mdgl_dyh" src="/static/img/大于号.png"></image>
                        </view>
						<view v-if="detail.status == 0">
							暂停营业
						    <image class="mdgl_dyh" src="/static/img/大于号.png"></image>
						</view>
                    </view>

                    <view class="kk_1">
                        <view class="kk_1_text1">门店定位</view>
                        <view>
                            
                            <image class="mdgl_dyh" src="/static/img/大于号.png"></image>
                        </view>
                    </view>

                    <view class="kk_1">
                        <view class="kk_1_text1">门店地址</view>
                        <view>
                            {{detail.address}}
                            <image class="mdgl_dyh" src="/static/img/大于号.png"></image>
                        </view>
                    </view>

                    <view class="kk_1_1">
                        <view class="kk_1_text1">街道地址</view>
                        <view class="kk_1_2">
                            <view></view>
                            <view><image class="qingchu" src="/static/img/x.png"></image></view>
                        </view>
                    </view>
                </view>

                <view class="g1"></view>

                <view>
                    <view class="kk_2">
                        <view>门店简介</view>
                        <view class="kk_2_1">
                            <text>{{detail.dec}}</text>
                            <view><image class="qingchu" src="/static/img/x.png"></image></view>
                        </view>
                    </view>

                    <view class="kk_2">
                        <view>门店介绍</view>
                        <view class="kk_2_1">
                            <text>{{detail.select_name}}</text>
                            <view><image class="qingchu" src="/static/img/x.png"></image></view>
                        </view>
                    </view>
                    <view class="baocun">
                        <view>保存</view>
                    </view>
                </view>
            </view>
        </block>

        <block v-if="type == '2'">
            <view class="tp_kk">
                <view class="kk5">
                    <view>列表图片</view>
                    <view class="kk5_text">建议尺寸：690px*276px;比例：2.5:1</view>
                </view>

                <view class="kk6">
                    <view><image class="xiangji" src="/static/img/相机1.png"></image></view>
                    <view class="kk6_text">上传图片</view>
                </view>
            </view>

            <view class="tp_kk">
                <view class="kk5">
                    <view>门店图片</view>
                    <view class="kk5_text">建议尺寸：800px*500px;比例：8:5</view>
                </view>

                <view class="kk6">
                    <view><image class="xiangji" src="/static/img/相机1.png"></image></view>
                    <view class="kk6_text">上传图片</view>
                </view>
            </view>

            <view class="tp_kk">
                <view class="kk5">
                    <view>详情图片</view>
                    <view class="kk5_text"></view>
                </view>

                <view class="kk6">
                    <view><image class="xiangji" src="/static/img/相机1.png"></image></view>
                    <view class="kk6_text">上传图片</view>
                </view>
            </view>

            <view class="baocun">
                <view>保存</view>
            </view>
        </block>

        <block v-if="type == '3'">
            <view class="kk3">
                <view class="kk_3">
                    <view class="kk_3_1">
                        <view class="kk_3_1_text">wifi名称</view>
                        <input v-model="detail.wifi_username" class="input_md" type="text" placeholder="yjzzqps" />
                    </view>

                    <view class="kk_3_1">
                        <view class="kk_3_1_text">wifi密码</view>
                        <input v-model="detail.wifi_password" class="input_md" type="text" placeholder="88888888" />
                    </view>

                    <view class="kk_3_2">
                        <view class="wifi_shanchu">
                            <view>删除</view>
                        </view>
                    </view>
                </view>

                <view class="kk_3">
                    <view class="kk_3_3">
                        <view class="kk_3_4">
                            <view><image class="jia" src="/static/img/加.png"></image></view>
                        </view>
                        <view>添加新的wifi</view>
                    </view>
                </view>
            </view>
            <view class="di">
                <view class="cz-di-k">
                    <view class="">
                        <view>保存</view>
                    </view>
                </view>
            </view>
        </block>

        <block v-if="type == '4'">
            <view class="kk3">
                <view class="kk_3">
                    <view class="kk_3_1">
                        <view class="kk_3_1_text">门店标签</view>
                        <input class="input_md" type="text" placeholder="免费wifi" />
                    </view>

                    <view class="kk_3_2">
                        <view class="wifi_shanchu">
                            <view>删除</view>
                        </view>
                    </view>
                </view>

                <view class="kk_3">
                    <view class="kk_3_3">
                        <view class="kk_3_4">
                            <view><image class="jia" src="/static/img/加.png"></image></view>
                        </view>
                        <view>添加新的标签</view>
                    </view>
                </view>
            </view>
            <view class="di">
                <view class="cz-di-k">
                    <view class="">
                        <view>保存</view>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
// pages/mendianguanli/mendianguanli.js
var app = getApp();
import {mendiandetail} from "@/common/api";
export default {
    data() {
        return {
            type: '1',
			detail: {}
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
		this.mendiandetail()
	},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        changetype: function (option) {
            var that = this;
            var type = option.currentTarget.id;
            that.setData({
                type: type
            });
            uni.showLoading({
                title: '加载中...'
            });
            uni.hideLoading();
        },
		mendiandetail(){
			uni.showLoading({
			    title: '加载中...'
			});
			const param = {
				id: app.globalData.store_id
			}
			mendiandetail(param, (res => {
				this.setData({
					detail: res.data.data
				})
				uni.hideLoading();
			}))
		}
    }
};
</script>
<style>
.menu {
    width: 100%;
    height: auto;
    overflow: hidden;
    top: 0;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}
.menu01 {
    width: 23%;
    line-height: 90rpx;
    font-size: 32rpx;
    text-align: center;
    float: left;
    color: #ff4800;
    border-bottom: 2px solid #ff4800;
}
.menu02 {
    width: 23%;
    line-height: 90rpx;
    font-size: 32rpx;
    text-align: center;
    float: left;
    color: #666666;
}

.kk {
    padding-bottom: 40rpx;
}
.kk_1 {
    display: flex;
    justify-content: space-between;
    height: 80rpx;
    align-items: center;
    margin: 0 20rpx;
    font-size: 28rpx;
}

.input_md {
    width: 240rpx; /* 输入框宽度根据内容自适应 */
}

.mdgl_dyh {
    width: 30rpx;
    height: 30rpx;
}

.kk_1_1 {
    margin: 0 20rpx;
    font-size: 28rpx;
    padding-bottom: 20rpx;
}

.kk_1_2 {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
}

.kk_1_text1 {
    color: rgb(97, 95, 95);
}

.kk_2 {
    margin: 20rpx;
    color: rgb(97, 95, 95);
}

.kk_2_1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    color: #000;
    font-size: 28rpx;
}

.qingchu {
    margin-left: 10rpx;
}

.kk3 {
    height: 94vh;
    background-color: rgba(216, 214, 214, 0.233);
    padding-top: 20rpx;
    padding: 20rpx;
}

.kk_3 {
    background-color: rgb(255, 255, 255);
    border-radius: 10rpx;
    padding: 20rpx 20rpx 20rpx 40rpx;
    margin-bottom: 20rpx;
}
.kk_3_1 {
    display: flex;
    height: 100rpx;
    align-items: center;
}

.input_md {
    width: 70%;
    background-color: rgba(216, 214, 214, 0.233);
    padding: 10rpx;
    margin-left: 20rpx;
    border-radius: 6rpx;
    height: 50rpx;
}

.wifi_shanchu {
    border: 1rpx solid rgb(177, 22, 22);
    width: 100rpx;
    height: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6rpx;
    color: rgb(177, 22, 22);
}

.kk_3_2 {
    display: flex;
    justify-content: flex-end;
    margin-right: 40rpx;
}

.jia {
    width: 30rpx;
    height: 30rpx;
}
.kk_3_3 {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rpx solid rgb(193, 196, 196);
    height: 80rpx;
    margin-left: -20rpx;
    border-radius: 10rpx;
}
.kk_3_4 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rpx;
    margin-right: 20rpx;
}

.di {
    color: rgb(104, 65, 28);
    position: fixed;
    bottom: 0rpx;
    z-index: 0;
    width: 100%;
    background: #ffffff;
    height: 200rpx;
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间平均分布在容器中 */
    align-items: center;
}

.cz-di-k {
    width: 100%;
    height: 100rpx;
    margin: 30rpx 30rpx 30rpx 30rpx;
    background-color: rgba(250, 175, 36, 0.712); /* 设置输入框背景色为灰色 */
    border-radius: 10rpx; /* 设置边框圆角 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: center;
    align-items: center; /* 垂直居中 */
    color: rgb(255, 255, 255);
}
</style>
